Thing Three- Designing a Blog: KISS

Not that kind of kiss.  And watch out for the comma- a subtle change of sense. 

KISS- Keep it simple, stupid!  

  by  Jeff Kubina 

KISS is the design principle that says less is more, that sophistication is simplicity, and that something isn't perfect until you've stripped out all the unnecessaries.  Something completely unlike the Rube Goldberg machine above!

There's two aspects to good kiss: aesthetic and practical.  I've been talking a lot this week about simple but stunning webdesign, we've looked at myfav.es, moving on from the basic blogger templates and taken an early peak at Google Reader's possible future.  Adherence to aesthetic principles is what makes Apple products attractive to millions, and commands a premium price for their gadgets. 

KISS- Keep it simple stupid.

Aesthetics aside, with the bonnet up and our hands greasy, it is all about how it works, and you may have noticed that we've dropped the comma.  Wikipedia has a full discussion on whether there ought to be a comma or not, but KISS with a comma signals that if the application or hardware fails then it should 'fail simple'.  This kind of KISS warns against over-engineering a product or piece of software.  The complexity to be avoided would be that which makes something difficult for a new user to understand, something that is counter intuitive, or something that requires a special tool or a Ph.D. in programming to fix.  The chap who coined the phrase was an aircraft engineer- and expensive aircraft are not something you ever want to fail in a complex way- something that's simple stupid is something which ideally can be fixed with basic tools by a general engineer, possibly in the field under enemy fire.  Less extreme examples of this kind of KISS include well-designed furniture which can be assembled using an Allen key, clockwork torches and radios, or this fun mouse experiment- how much instruction is there; how much do you need?

KISS in blogs

According to good KISS principles blogs should fairly easy to use, just like a physical journal.  You pick one that you like, that's the right size and in your favourite colour.  You grab a comfy pen.  Maybe you'll want to plaster the cover with stickers.  You write in it daily and within a week it feels like an extension of your mind.  Why isn't it like that with a blog?  Why do they have to be clunky, idiosyncratic and difficult to use?  I mean, the premise behind it is quite simple: text, pictures, maybe the odd video clip- does it really have to be this hard?

 by  MarcelGermain

I recently created a new blog for my book group books@pub on tumblr.  Now tumblr is where the cool kids hang out, they have a lot of really good themes which look slick on screen, but I did find it very difficult to use.  From the dashboard I didn't find changing the design particularly intuitive, it didn't offer a live snapshot of what your blog would like like with each design, only what a very well executed and trendy blog with chunks of quotations and blurred photographs would look like.  Blogger doesn't always fare much better.  Without the Blogger in Draft Templates blogs can all begin to look the same, sure they're simple, but they can look like the ugly sisters compared to the standard Wordpress and tumblr designs.  books@pub is a group blog which was not as easy to set up on tumblr as I anticipated, Wordpress I think is even worse for this.  When you have multiple contributors it's important that it the registration process is simple for you and even simpler again for the others involved, who may not have the same levels of expertise.

KISS for you

You too can apply these principles to your blog.  Whether it fails simple or complex is fairly out of your hands, but you can make the reading experience better for your readers.  It is worth spending some time to think about design.  If the font is too small or serifed, if the contrast between colours isn't working then people won't enjoy reading it, and you'll enjoy writing it less too: it's worth taking pride in the display as well as the content.  Have a look at other people's blogs for new ideas: is it worth adding a search function to your blog, a tag cloud?  Do you have too many images and applications cluttering up your right and left hand navigation? 

Try and find out who your readers are, what they search for and where they found out about you- this will help you tailor aspects of your blog to them.  I use Feedjit and web analysis from eLogic, that knowlegdge gives me an insight into how my readers keep up to date with me, the kinds of keywords they search with, even their screen resolutions and browser choice- have a look at your site on a different machine, a different browser to make sure you're still gorgeous and easy to use. 

  by  liftarn 

KISS for libraries

Millennials, born digitals and other buzz-worded social groups are used to machines, software and interfaces that have been designed to be both instinctive to use and that you can repair with a wizard or a diagnostic tool.  These people are our readers and customers; the consumers of our data.  I cut my teeth on the Commodore Vic20: this makes me a patient person with low to reasonable expectations; I can wait 30 minutes for something to load from a tape, use a card catalogue and Boolean operators in my search strings.  Good for me: have an 80s childhood sticker!

Our undergraduate users expect instant information, interfaces that are second nature to them and the seamless integration of all available reources.  So they should too, this level of service is something we should all aspire to.  Take a look at these slides from the excellent I've got Google, why do I need you?  They should get you thinking about the disparity of what we expect from our users, what they demand from us and how good design can bridge that gap.

Thing Two- RSS Q&A

Try as I might, I'm struggling to make this as fascinating as my normal output.  So here we go with some Q& A, a couple of sets of slides which you can watch for extra credit and an unexpected bonus for fans of sleek design: something beautiful and new!

What is RSS?

Simply, it's web content in a special form, which is 'read' by a reader.

How do I get it?

You're going to need two things, something to read and something to read it on.  The good news is that there's plenty to read, most newspapers, blogs and even LOLcats are available in RSS format.  Now all you have to do it pick a reader.  Some browsers, Firefox included, can understand RSS, but most people chose to access it through a web-based reader, a downloaded reader or via their email client.  Web-based readers, Google Reader, for example, can be thought of as your inbox on the web.  On the left you can see my a LOLcat RSS feed displayed on Google Reader.

Why do I want it?

In libraries we are in the interesting position of being information producers as well as consumers, so it's not just about keeping yourself up to date!  A common library application for RSS is keeping readers informed about new acquisitions in a given subject area, this means they can browse print and digital titles they may be interested in without specifically searching the catalogue- good example of some of the subject detail on offer here at the Cincinnati Public Library.  In our role as information producers we can 'curate' RSS content from multiple sources and present it for our readers.  The science@cambridge gateway (below) aggregates news, blogs and library generated content for science students at the University.

science@cambridge

This specially constructed page makes use of University branding and allows users to quickly access other University resources, but this can be done more informally.  Good examples include LK's excelled Cam23 bloglist and the Philosophy feeds provided by the Casimir Lewy Library, both using netvibes.

In short, RSS feeds for libraries are like having a constant newsletter that can be discretely tailored to your readers' interests.

Can it do anything slightly more exciting?

No, well maybe.  New from Google Labs is Google Reader Play which uses the same software as the 'Recommended' function in the standard reader.  It visually displays web content you might be interested in based on feeds you currently subscribe to, you can then further refine it by hitting the smiley faced button.  I've only been playing with it for the last 4 minutes, but it is quite fun!

Extra Credit

Google Reader Play makes your RSS feeds exciting - Pocket-lint
Library Garden's Magical Mystery Tour: RSS Demystified (slides)
RSS and Its Use In Libraries- Sukhdev Singh (slides)

Sharing the style secret: Blogger in draft

Ever feel like a makeover?  The Cam23 folk seem to.


I've read lots of comments about how easy Blogger is to use, but none about how damn good-looking the results are.  Despite the fact that I had a little trouble in my tinting class, beauty_school_droput is here to help.  Now you might not like my bare boarded, New York loft style look, you might think it a little gruff and that it could do with a nice rug or a few scatter cushions.  Just add pink:

Wearing Simple, with belknap (food & drink) background

No, I think jelly beans and pink is probably more than I can bear, but I've got a little more up my sleeve.  A beautiful calming sky is much better.  Or how about books, burgers or beer?  All things close to my heart.  Rugby balls, pool balls?  Vintage washing machines or computers?  Vertical stripes, horizontal stripes, rain streaks on a window?  One of these or more must be floating your boat.

Wearing Picture Window, with standard background image

So just how am I doing all this?  Well, I haven't written the style sheets myself, nor have I've forked out on a designer just to create this blog post.  This was all created using Blogger in draft's template designer.  I first heard about this a couple of months ago, it was all still in beta.  Excitedly I changed from my standard template to the pretentious boards you see now, and then promptly forgot about it.

Despite being 'in draft'  the template designer is remarkably easy to use just log in to Blogger in draft as you would normally and look for the template designer sub menu in the Design or Layout tab.  Choose your template and background image:

Wearing picture Window with RBFried (abstract) background image

Adjust the layout to the number of columns you want and then fiddle with the advanced settings to your heart's content.  You can customize just about every line and section of your blog.  

Still need help?  Here's the official walkthrough.

You will be asked if you want Blogger in draft to be your regular login, if you are a confident tweaker this may be worth your while.  Added extras include a couple of extra options during compose, an ability to add images you've previously used and a much improved post preview.

That's all my design secrets gone in one week, but I look forward to seeing changes you make to your blogs, even if you do pick the pink jelly beans!

Extra Credit

Blogger in draft blog

Thing One: an extra helping- FoxTabs and tab management

Lots of people seem to be interested in visual alternatives to iGoogle and netvibes, many mentioning that they used custom start pages from Chrome and Firefox.  I introduced myfav.es yesterday.  The dodgy name aside, the product is incredibly beautiful, providing a designer alternative to those clumps of text we hate to see first thing in the morning.

So we all like the myfav.es look, we have four or five sites on there, it's 9:05 and the browsing experience still bears all the hallmarks of sleek, designer zen.  What happens when we get to mid-morning and we have six to a dozen tabs open?  It's not looking so minimalist now.  That's where tab management comes in.

If you don't want to close or bookmark for later the tabs you are working with, then you need to find a way to stay in control of them.  FoxTab, using a similar design to myfav.es, lets you flick through currently open tabs

Click to make big

store, update and amend your favourite tabs

Click to make big

and see which tabs you've recently closed

Click to make big

There are a selection of views, angles and background colours to play with.  These control screens can be accessed by clicking the FoxTab logo installed next to your address bar, or by hitting Ctrl + Q.  The middle example shows the static 'wall' display mode, but the others can all be spun with Ctrl + Tab or, in either direction, by using your wheel mouse.  These keyboard shortcuts can be amended by users to keys more comfortable for them.

Currently it's only available for Firefox, but it's intuitive to use, easy to install and gives you an instant snapshot of what's going on on your browser.

Thing One continues: myfav.es: a sleek, alternative start page

I first heard about myfav.es, then called fav4, earlier this year.  Flash games aside, the applications I want to use on sites like iGoogle and netvibes are text heavy, if that doesn't appeal to you then myfav.es may be just what you are looking for.

Lights on, linking to Amazon, twitter, bbc, gmail and reddit.

I like the concept.  It's very visual, it's simple and instinctive to use; it sports a clean, minimalistic design and is easy to customise.  Choose to link to as many or as few sites as you want, decide if you want to arrange them in a grid or as a scrollable/ static row.  Tweak them: that site links to the BBC home page, want to link to BBC sport?  You can amend the URL and still keep the BBC icon.  Want to link to a page not listed? Choose one of the free icons and specify your URL, you can even change the colour of the icon.

Want to see it in black?

Lights off, linking to The Guardian, IMDb, New York Times, Slate magazine and Mashable

My only gripe about myfav.es is that clicking on an icon takes you directly to the site, I rather like my start page to hang around on one tab of my browser.  You can get around this by changing your browser settings so that each link opens in a new tab or window or by clicking the wheel of your mouse rather than the left button.  I'd like to use myfav.es more, it really fits in with how I like my browser to look and function, but I simply can't let go of my iGoogle page and the data it brings to me at a glance, although it is worth mentioning that you can have iGoogle as one of your icons.  I've always thought that its large icons would make it useful to those just beginning surfing or those who just want to browse a handful of sites.

Use it or just admire it, it's up to you.

Minimalist.

So, this week I've been thinking, talking and writing about my secret love affair with Google Chrome.

I have lots of secret love affairs, most of them are bad relationships: trashy adventure novels I stay up until 2 am reading, Twiglets which are antisocial to munch.  Some of them are wrong but good.  I count Stephen King in there no matter how many people pooh-pooh him, chillies too: sometimes I fear what they are doing to my stomach lining, but they have vitamin C in, so they can't be wholly evil.

I think that the 'don't be evil' corporation's Chrome may be another one of those good for me secret affairs.  I have got the hang of the download function, I'm impressed with how easy it is to create and manage bookmarks.  I'm a bit confused that it's built-in spell checker doesn't recognise the word Google, but there you go.  Xmarks aside- I never leave the house without Xmarks- I've held off on fully exploring the extensions, perhaps that would be too much of a betrayal of Firefox.

Aside from what's under the bonnet of Chrome, what I like about it is the sleek minimalism of the design.  I don't like clutter, I don't like lots of buttons, and I want to be able to customise it so that key functions are where I expect them to be, not where the designer thinks they ought to be.  Customizability and a fuss-free interface are some of the reasons I'm such a fan of Firefox, and why I gave Safari a good long go before I gave it up.  It's also what makes Apple products so enviably gorgeous, but the Scot within is not prepared to pay the price premium for that.

The good news is that you can enjoy beautiful, pared down design for almost-free on the web.  I stumbled across this article from Smashing Magazine on minimalist web-design this morning, via the Librarian in Black's twitter feed.  As well as tips on how to strip back on unnecessary content, use white or blank space to your advantage, and hints on image choices it showcases some mouthwatering examples of good design.  The example on the left is from Anothercompany.  The monochrome image in the centre makes a strong statement and it's fabulously clutter-free.  Sadly it is under construction, so not much more than eye candy at present, but I find it an attractive design, and by far my favourite from the examples featured in the article.

beauty_school_dropout used to sport a basic black and grey design; I have missed the simplicity of the layout since my revamp, but I think it was well intentioned but boring.  Perhaps I'll do a bit more research and have a rethink.